<template>
  <div class="search-history">
    <van-cell title="搜索历史">
      <!-- 编辑状态的 删除按钮 -->
      <template v-if="isEdit">
        <span @click="clearHistory">全部删除</span>
        &nbsp;
        <span @click="isEdit = false">完成</span>
      </template>
      <!-- 删除按钮 -->
      <van-icon v-else name="delete" @click="isEdit = true" />
    </van-cell>

    <!-- 搜索列表 -->
    <van-cell
      @click="clickHistory(h)"
      v-for="(h, i) in historyList"
      :title="h"
      :key="i"
    >
      <van-icon v-if="isEdit" @click.stop="delHistory(i)" name="close" />
    </van-cell>
  </div>
</template>

<script>
export default {
  name: 'search-history',
  props: ['historyList'],
  data() {
    return {
      isEdit: false,
    };
  },
  methods: {
    // 1.删除方法
    delHistory(i) {
      // 根据下标，删除 历史记录
      this.historyList.splice(i, 1);
    },
    // 2.删除所有历史记录
    clearHistory() {
      // 从 第0个 一直 删到最后
      this.historyList.splice(0);
    },
    // 3.点击关键字执行搜索
    clickHistory(keywrod) {
      // 只有 非编辑状态时，才会 调用父组件搜索事件函数
      !this.isEdit && this.$emit('sonSearch', keywrod);
    },
  },
  computed: {},
  watch: {},
  components: {},
};
</script>

<style lang="less" scoped>
</style>
